<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<%@ include file="/WEB-INF/views/include/head.jsp"%> 
<script src="${ctxStatic}/js/layer.js"></script>
<script src="${ctxStatic}/js/style.js"></script>
<link rel="stylesheet" href="${ctxStatic}/css/common_erp.css">
<link rel="stylesheet" href="${ctxStatic}/css/list.css">
<style type="text/css">
    

    /* no  */
    .table-no{width: 80px}
    /* 订舱委托单   */
    .table-dcwtdh{width: 140px}
    /* 合同订单号  */
    .table-htddh{width: 140px}
    /* 收件人  */
    .table-sjr{width: 100px}
    /* 通知人  */
    .table-tzr{width: 100px}
    /* 交货条件  */
    .table-jhtj{width: 100px}
    /* 目的港  */
    .table-mdg{width: 100px}
    /* 交货港   */
    .table-zhg{width: 100px}
    /* 总箱数  */
    .table-zxs{width: 100px}
    /* 总件数  */
    .table-zjs{width: 100px}
    /* 总毛重  */
    .table-zmz{width: 100px}
     /* 总体积  */
    .table-ztj{width: 100px}
     /* 订舱费用  */
    .table-dcfy{width: 100px}
     /* 创建人员 */
    .table-cjry{width: 100px}
     /* 创建日期 */
    .table-cjrq{width: 100px}
   
    
    </style>

<script type="text/javascript">
    $(document).ready(function() {
		
		searchListForm();
		
            $(".tabBox ul li").each(function(){
                var index=$(this).index();

                $(".tabBox ul li").eq(0).addClass("active");

                $(this).click(function(){

                    $(this).addClass("active").siblings().removeClass("active");
                    
                    $("#tabPageStatus").val($(this).val());
                    searchListForm();

                    $(".tabBoxSm > .tabSm").eq(index).stop(true).show().siblings().stop(true).hide();
					
					var tableW = $(".tabBoxSm > .tabSm").eq(index).find('.tableHead').width();
					var tabodyH = $(".tabBoxSm > .tabSm").eq(index).find('.tableBody').height();
					var tableScrollH = $(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').height();
					if(tabodyH>tableScrollH){
						$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width',tableW + 18 + 'px')
					}else{
						$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width','inherit')
					}

                })

            })

        });
    
    // 检索方法
	function searchListForm() {
		var params = $("#searchForm").serialize();
		$("#activity_pane").showLoading();
		$.post("${ctx}/consignment/note/searchList",params,function(result) {
					var listHtml = result["bookingOrders"];
					var pageHtml = result["page"];
					$("#listHtml").html(listHtml);
					$("#paging").html(pageHtml);
					$("#activity_pane").hideLoading();
				}, 'json');
	}
	
	// 重置方法
	function clearParam() {
		$("#ognizationNameB").val("");
		$("#dateStart").val("");
		$("#dateEnd").val("");
		searchListForm();
	}
	
  
</script>
</head>
<body>

<form id="searchForm" method="post">
<div class="listArea" id="activity_pane">
	<div class="listBg">
        <div class="searchArea clearfix">
            <div class="searchLeft clearfix">
                <%-- <!-- 合同订单号 -->
                <div class="searchInp clearfix">
                    <p><spring:message code="contractorder_ID"/></p>
                    <input type="text" class="w-styleNub" id="indentId" name="indentId">
                </div> --%>
                <!-- 客户 -->
                <div class="searchInp clearfix">
                    <p><spring:message code="consignmentNote_customer"/></p>
                    <input type="text" class="w-styleNub" id="ognizationNameB" name="ognizationNameB">
                </div>
                <!-- 日期 -->
                <div class="searchInp clearfix">
                    <p><spring:message code="inventory_Inbound_date"/></p>
                    <div class="timeBox">
							<input type="text" class="laydate-icon" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd',onpicked:null})"
								id="dateStart" name="dateStart" style="width: 110px">
							<p class="list">~</p>
							<input type="text" class="laydate-icon" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd',onpicked:null})" 
								id="dateEnd" name="dateEnd" style="width: 110px" >
                    </div> 
                </div>
            </div>	
            <div class="searchRight clearfix">
                <!-- 检索 -->
                <button type="button" onclick="searchListForm();"><spring:message code="commom_check"/></button>
                <!-- 重置 -->
                <button type="button" onclick = "clearParam()"><spring:message code="common_reset"/></button>
                <!-- 创建 -->
                <button type="button" onclick="popup('1000px','650px','${ctx}/consignment/note/createbookorder')"><spring:message code="common_create"/></button>
            </div>								
        </div>
    </div>
   
    <input type="hidden" id="tabPageStatus" name="tabPageStatus" value="0"/>
    <div class="tabBox">
        <ul class="clearfix">
            <li class="active" value="0"><spring:message code="consignmentNote_tab_all"/></li>
            <li value="1">新建</li>
            <li value="2">已提交</li>
            <li value="3"><spring:message code="consignmentNote_tab_del"/></li>
        </ul>
	</div>
	 
    <div class="listBg tabPadding overflowX">
        <div class="tableArea tabBoxSm">
            <div class="tableScrollSm" style = "height:650px;overflow: auto;width: 1452px;">
                <table cellpadding="0" class="tableHead" >
                    <thead>
                    <tr>
                        <th><p class="table-no"><spring:message code="consignmentNote_no"/></p></th>
                        <th><p class="table-dcwtdh"><spring:message code="consignmentNote_noteNo"/></p></th>
                        <th><p class="table-sjr"><spring:message code="consignmentNote_recipient"/></p></th>
                        <th><p class="table-tzr"><spring:message code="consignmentNote_Notify"/></p></th>
                        <th><p class="table-jhtj"><spring:message code="consignmentNote_jhtj"/></p></th>
                        <th><p class="table-zhg"><spring:message code="consignmentNote_portofloading"/></p></th>
                        <th><p class="table-mdg"><spring:message code="consignmentNote_portofdestination"/></p></th>
                        <th><p class="table-zxs"><spring:message code="consignmentNote_totalnumberofcases"/></p></th>
                        <th><p class="table-zjs"><spring:message code="consignmentNote_totalnumber"/></p></th>
                        <th><p class="table-zmz"><spring:message code="consignmentNote_Totalgrossweight"/></p></th>
                        <th><p class="table-ztj"><spring:message code="consignmentNote_totalvolume"/></p></th>
                        <th><p class="table-dcfy"><spring:message code="consignmentNote_Bookingfee"/></p></th>
                        <th><p class="table-cjry"><spring:message code="consignmentNote_Createpersonnel"/></p></th>
                        <th><p class="table-cjrq"><spring:message code="consignmentNote_CreateTime"/></p></th>
                    </tr>
                    </thead>
                </table>
                <table cellpadding="0" class="tableBody">
                    <tbody id="listHtml">
                    </tbody>
                </table>	
            </div>
        </div>
    </div>
    <div id = "paging" ></div>
</div>
</form>
</body>
</html>